<template>
  <view class="from-to">
    <u-steps direction="column" dot :current="2" activeColor="#31CF73" :iconSize="8">
      <u-steps-item>
        <template #desc>
          <view class="flex-row justify-between items-start" @click="$emit('on-from', $event)">
            <view class="contract" v-if="from">
              <view class="name-tel">
                <text class="mr20">{{ fromItem?.contact_name_1 }}</text>
                <text>{{ fromItem?.contact_mobile_1 }}</text>
              </view>
              <view class="address mb10 mt10">{{ $ftext(fromAddress)  }}</view>
            </view>
            <view v-else class="no-item u-padding-bottom-80">请选择取货地址</view>

            <up-image v-if="!readonly" src="https://zxtest001.oss-cn-beijing.aliyuncs.com/l-owner-uni3/icon_youjiantou.png" width="24rpx" height="24rpx"></up-image>
          </view>
        </template>
      </u-steps-item>

      <u-steps-item>
        <template #desc>
          <view class="flex-row justify-between items-start" @click="$emit('on-to', $event)">
            <view class="contract" v-if="to">
              <view class="name-tel">
                <text class="mr20">{{ toItem?.contact_name_1 }}</text>
                <text>{{ toItem?.contact_mobile_1 }}</text>
              </view>
              <view class="address mt10">{{ $ftext(toAddress) }}</view>
            </view>
            <view v-else class="no-item">请选择收货地址</view>
            <up-image v-if="!readonly" src="https://zxtest001.oss-cn-beijing.aliyuncs.com/l-owner-uni3/icon_youjiantou.png" width="24rpx" height="24rpx"></up-image>
          </view>
        </template>
      </u-steps-item>
    </u-steps>
  </view>
</template>

<script setup lang="ts">
import { watch, ref, reactive, computed } from 'vue';
const props = defineProps({
  from: {
    type: Object,
  },
  to: {
    type: Object,
  },
  readonly: { type: Boolean, default: false },
});

const fromItem = ref(props.from);
const toItem = ref(props.to);
const fromAddress = ref('')
const toAddress = ref('')

watch(
  () => props.from,
  (val: any) => {
    fromAddress.value = val.province  + val.city  + val.district  + val.complete_address ;

    fromItem.value = val;
    console.log('zzzzzz', fromAddress.value, fromItem.value)
  }
);
watch(
  () => props.to,
  (val: any) => {
    toAddress.value = val.province  + val.city  + val.district  + val.complete_address 
    toItem.value = val;
  }
);
</script>

<style lang="scss" scoped>
.from-to {
  ::v-deep .u-steps-item__line--column {
    flex: 1;
    height: 100% !important;
    background-color: #fff !important;
    border-left: 1px dashed #eee !important;
  }
  .no-item {
    color: #bebebe;
    line-height: 32rpx;
    font-size: 32rpx;
    padding-top: 6rpx;
    padding-bottom: 40rpx;
  }
  .contract {
    .name-tel {
      font-weight: 400;
      color: $uni-text-color;
      line-height: 40rpx;
    }
    .address {
      font-weight: 400;
      color: $uni-text-color2;
      line-height: 40rpx;
      font-size: 26rpx;
    }
    .mr20 {
      display: inline-block;
      margin-right: 40rpx;
    }
    .mb10 {
      margin-bottom: 20rpx;
    }
    .mt10 {
      margin-top: 10rpx;
    }
  }
}
</style>
